<!-- 告警中心-数据中心 -->
<template>
    <div class="t-ctn">
        <el-form
                ref="formCheckCfg"
                label-width="100px"
                :inline="true"
                label-position="left"
                :model="formCheckCfg">
            <div style="display: flex;">
                <el-form-item prop="systemid" label="供热系统" style="margin-right: 107px">
                    <el-select v-model="formCheckCfg.systemId">
                        <el-option
                            v-for="(item,index) in typeOptions"
                            :key="index"
                            :label="item.name"
                            :value="item.systemid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="alarmCnName" label="告警类型" style="margin-right: 107px">
                    <el-select v-model="formCheckCfg.alarmCnName" clearable>
                        <el-option
                            v-for="(item,index) in typeOptions1"
                            :key="index"
                            :label="item"
                            :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="severity" label="告警级别" style="margin-right: 107px">
                    <el-select v-model="formCheckCfg.severity" clearable>
                        <el-option
                            v-for="(item,index) in typeOptions2"
                            :key="index"
                            :label="item.severity"
                            :value="item.alarmNum">
                        </el-option>
                    </el-select>
                </el-form-item>
            </div>
                <div style="display: flex;">
                    <el-form-item prop="starttime" label="开始时间" style="margin-right: 107px">
                        <el-date-picker
                            v-model="formCheckCfg.starttime"
                            type="datetime"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item prop="endtime" label="结束时间" style="margin-right: 107px">
                        <el-date-picker
                            v-model="formCheckCfg.endtime"
                            type="datetime"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                </div>
            <div style="display: flex;">
                <el-form-item>
                    <el-radio-group v-model="formCheckCfg.isClear">
                        <el-radio @click.native.prevent="clickItem(1)" :label="1">已恢复</el-radio>
                        <el-radio @click.native.prevent="clickItem(0)" :label="0">未恢复</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item style="margin-right: 107px">
                    <el-radio-group v-model="formCheckCfg.isRead">
                        <el-radio @click.native.prevent="clickItemRed(1)"  :label="1">已读</el-radio>
                        <el-radio @click.native.prevent="clickItemRed(0)"  :label="0">未读</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getList">确定</el-button>
                </el-form-item>
            </div>

            </el-form>
        <div class="s-n-ctn-main" style="position: relative">
            <div style="height:100%" ref="tableWrapper">
                <el-table
                    ref="singleTable"
                    :data="tableData"
                    :height="tableH"
                    stripe
                    style="width: 100%;background-color: transparent">
                    <el-table-column
                        prop="localtion"
                        show-overflow-tooltip
                        label="位置">
                    </el-table-column>
                    <el-table-column
                        prop="alarmCnName"
                        show-overflow-tooltip
                        label="告警类型">
                    </el-table-column>
                    <el-table-column
                        prop="alarmName"
                        show-overflow-tooltip
                        label="类别">
                    </el-table-column>
                    <el-table-column
                        prop="alarmTime"
                        show-overflow-tooltip
                        label="发生时间">
                    </el-table-column>
                    <el-table-column
                        prop="endTime"
                        show-overflow-tooltip
                        label="恢复时间">
                    </el-table-column>
                    <el-table-column
                        prop="severity"
                        show-overflow-tooltip
                        label="级别">
                    </el-table-column>
                    <el-table-column
                        prop="isClear"
                        show-overflow-tooltip
                        label="告警是否已清除">
                        <template slot-scope="scope">
                            <span>{{scope.row.isClear === 0 ? '否' : '是'}}</span>
                        </template>
                    </el-table-column><!--
                <el-table-column
                    prop="systemId"
                    show-overflow-tooltip
                    label="所属供热系统">
                </el-table-column>-->

                    <el-table-column
                        prop="isRead"
                        show-overflow-tooltip
                        label="是否已读">
                        <template slot-scope="scope">
                            <span style="margin-right: 10px;display: inline-block">{{scope.row.isRead === 0 ? '未读' : '已读'}}</span>
                            <el-button
                                size="mini"
                                v-if="scope.row.isRead === 0"
                                :type="roles[0].roleCode === 'Query_Data' ? 'info' : 'primary'"
                                :disabled="roles[0].roleCode === 'Query_Data'"
                                @click.native.stop="handleRead( scope.row)">标记已读</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="详细信息" width="180px" fixed="right">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="primary"
                                @click.native.stop="handleEdit( scope.row)">详细信息</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 设计上没有分页 -->
                <pagination
                    :total="total"
                    :page.sync="formCheckCfg.pageNo"
                    :limit.sync="formCheckCfg.pageSize"
                    :page-sizes="[10, 20, 30, 50, 100]"
                    @pagination="getList"
                />
            </div>
        </div>
    </div>
</template>

<script>
    import API from '@/request/api'
    import {sysTime} from "../../../utils/utils";
    import Pagination from '../../../components/page'

    export default {
        name: 'DataCenter',
        components: {
            Pagination
        },
        computed: {
            roles(){
                return this.$store.state.roles
            }
        },
        data() {
            return {
                formCheckCfg:{
                    systemId: '',
                    alarmCnName: '',
                    severity: '',
                    isRead: '',
                    isClear: '',
                    endtime:sysTime(0),
                    starttime:sysTime(-7),
                    pageNo: 1,
                    pageSize:10
                },
                endtime:'',
                starttime:'',
                tableData:[],
                typeOptions:[],
                typeOptions1:[],
                typeOptions2:[],
                tableH:0,
                total:0
            };
        },
        mounted() {
            this.sourceTarget();
            this.fetTableHeight();
        },
        watch: {
            'formCheckCfg.systemId':{
                handler(newValue,oldValue){
                    this.getList()
                },
                deep:true
            },
        },
        methods: {
            clickItem(e){
                e === this.formCheckCfg.isClear ? this.formCheckCfg.isClear = '' : this.formCheckCfg.isClear = e
            },
            clickItemRed(e){
                e === this.formCheckCfg.isRead ? this.formCheckCfg.isRead = '' : this.formCheckCfg.isRead = e
            },
            resetHeight() {
                return new Promise((resolve, reject) => {
                    this.tableH = 0
                    resolve()
                })
            },
            // 设置table高度
            fetTableHeight() {
                this.resetHeight().then(res => {
                    this.tableH = this.$refs.tableWrapper.getBoundingClientRect().height - 100
                })
            },
            // 供热系统列表
            sourceTarget(){
                API.sourceTarget().then(res => {
                    if(res.code === 0){
                        this.typeOptions = res.result;
                        if(res.result.length > 0){
                            this.formCheckCfg.systemId = res.result[0].systemid
                            this.showInfo()
                        }
                    }else{
                        this.msgWarning(res.message);
                    }
                }).catch(err => {
                    // this.msgWarning(err);
                });
            },
            // 详细信息
            handleEdit(row){
                if(row.alarmType === 'weather'){
                    row.tag = '供热系统'
                }else{

                    if(row.alarmType === 'source'){
                        row.tag = '热源'
                        row.sourceId = row.alarmLocation
                    }
                    if(row.alarmType === 'unit'){
                        row.tag = '机组'
                        row.unitId = row.alarmLocation
                    }
                    if(row.alarmType === 'hall'){
                        row.tag = '单元'
                        row.hallId = row.alarmLocation
                    }
                    if(row.alarmType === 'household'){
                        row.tag = '户'
                        row.houseId = row.alarmLocation
                    }
                }

                this.$router.push({
                    path: '/supervision-cabin',
                    query:{
                        row:row
                    }
                })
            },
            // 标记已读
            handleRead(row){
                API.updateIsread({id:row.id,isRead:row.isRead === 1? 0: 1}).then(res => {
                    if(res.code === 200){
                        this.getList()
                    }else{
                        this.msgWarning(res.message);
                    }
                }).catch(err => {
                });
            },
            // 获取列表
            getList(){

                this.starttime = this.moment(this.formCheckCfg.starttime).format('yyyy-MM-DD HH:mm:ss');
                this.endtime = this.moment(this.formCheckCfg.endtime).format('yyyy-MM-DD HH:mm:ss');

                let data = {
                    systemId: this.formCheckCfg.systemId,
                    alarmCnName: this.formCheckCfg.alarmCnName,
                    severity: this.formCheckCfg.severity,
                    isRead: this.formCheckCfg.isRead,
                    isClear: this.formCheckCfg.isClear,
                    starttime:this.starttime,
                    endtime:this.endtime,
                    pageNo: this.formCheckCfg.pageNo,
                    pageSize:this.formCheckCfg.pageSize
                }

                API.getAlarmDetailList(data).then(res => {
                    if(res.code === 200){
                        this.tableData = res.result.Result;
                        this.total = res.result ? res.result.total : 0;
                    }else{
                        this.msgWarning(res.message);
                    }
                }).catch(err => {
                });
            },
            async showInfo(){

                let res4 =  await API.alarmType()
                let res5 =  await API.alarmLevel()

                if(res4.code === 200){
                    this.typeOptions1 = res4.result
                }else{
                    this.msgWarning(res4.message);
                }

                if(res5.code === 200){
                    this.typeOptions2 = res5.result
                }else{
                    this.msgWarning(res5.message);
                }
            }
        }
    };
</script>

<style lang="scss" type="text/scss" scoped>
    .t-ctn {

        ::v-deep .el-form{
            margin-right: 42px;
            margin-left: 46px;
            margin-top: 55px;
            flex-direction: column;

            .el-radio{
                color: #ffffff;
            }
        }

        .s-n-ctn-main{
            height: calc(100% - 180px);
        }
    }
</style>
